/**
 * 美团品牌色系主题系统 - 智融财务管理系统的视觉设计规范
 *
 * 开发人员：唐梓鑫
 * 开发时间：2025-10-20 至 2025-12-01
 * 模块职责：定义系统的完整视觉设计语言，包括色彩系统、排版规范、组件样式等美团品牌风格元素
 *
 * 技术要点：
 * - 美团品牌色彩系统和视觉规范
 * - CSS变量系统和主题定制能力
 * - Element UI组件样式覆盖和美化
 * - 响应式设计和多设备适配
 * - 美团品牌元素和视觉一致性
 *
 * 开发故事：负责系统的视觉设计和美团品牌风格的完整实现，与UI设计师深度配合，确保产品的视觉体验和品牌一致性。
 */
/* 美团品牌色系主题系统 */
:root {
  /* 主色 - 美团黄（优化对比度） */
  --primary-color: #e6b800;
  --primary-dark: #d4a600;
  --primary-light: #f2d633;
  --primary-bg: #fff9e6;
  --primary-gradient: linear-gradient(135deg, #e6b800 0%, #d4a600 100%);
  --primary-shadow: 0 4px 12px rgba(230, 184, 0, 0.4);
  
  /* 辅助色 - 美团绿 */
  --success-color: #06c05f;
  --success-dark: #05a850;
  --success-light: #d4f4e2;
  --success-gradient: linear-gradient(135deg, #06c05f 0%, #05a850 100%);
  --success-shadow: 0 4px 12px rgba(6, 192, 95, 0.3);
  
  /* 美团品牌色扩展（优化对比度） */
  --meituan-orange: #e55a2b;
  --meituan-red: #e63e3e;
  --meituan-blue: #2c3e8f;
  --meituan-purple: #7c3aed;
  
  /* 中性色 */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-tertiary: #8a8a8a;
  --text-placeholder: #c0c0c0;
  --text-white: #ffffff;
  
  /* 背景色 */
  --bg-page: #f7f8fa;
  --bg-white: #ffffff;
  --bg-gray: #f5f5f5;
  --bg-primary: var(--primary-bg);
  --bg-success: var(--success-light);
  
  /* 边框色 */
  --border-color: #e5e5e5;
  --border-light: #f0f0f0;
  --border-primary: rgba(230, 184, 0, 0.25);
  --border-success: rgba(6, 192, 95, 0.2);
  
  /* 状态色 */
  --error-color: #ff5757;
  --warning-color: #ff8f1f;
  --info-color: #3d7eff;
  
  /* 阴影 */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-round: 50%;
  
  /* 间距 */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  
  /* 侧边栏 */
  --sider-width: 240px;
  --sider-bg: #ffffff;
  --sider-gradient: linear-gradient(135deg, #fffbea 0%, #ffffff 100%);
  --sider-shadow: 2px 0 8px rgba(0,0,0,0.06);
  
  /* 动画 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 全局重置 */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text-primary); background: var(--bg-page); }

/* Element UI 主题覆盖 */
.el-button--primary { 
  background: var(--primary-gradient);
  border: none;
  color: var(--text-primary);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--primary-shadow);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}
.el-button--primary:hover, .el-button--primary:focus { 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 209, 0, 0.4);
}
.el-button--primary:active {
  transform: translateY(0);
  box-shadow: var(--primary-shadow);
}

.el-button--success {
  background: var(--success-gradient);
  border: none;
  color: var(--text-white);
  font-weight: 600;
  border-radius: var(--radius-md);
  box-shadow: var(--success-shadow);
  transition: all var(--transition-normal);
}
.el-button--success:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 192, 95, 0.4);
}

.el-button {
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-normal);
}
.el-button:hover {
  transform: translateY(-1px);
}

.el-menu { 
  border-right: none !important; 
  background: transparent !important;
}
.el-menu-item {
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all var(--transition-normal);
  border-radius: var(--radius-md);
  margin: 4px 12px;
  padding: 0 16px !important;
  position: relative;
  overflow: hidden;
}
.el-menu-item:hover {
  background: var(--primary-gradient) !important;
  color: var(--text-primary) !important;
  transform: translateX(4px);
  box-shadow: var(--primary-shadow);
}
.el-menu-item.is-active { 
  background: var(--primary-gradient) !important; 
  color: var(--text-primary) !important;
  font-weight: 700;
  transform: translateX(8px);
  box-shadow: var(--primary-shadow);
}
.el-menu-item.is-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--success-color);
  border-radius: 0 2px 2px 0;
}
.el-menu-item i {
  color: inherit;
  margin-right: 12px;
  font-size: 16px;
  transition: all var(--transition-normal);
}
.el-menu-item:hover i {
  transform: scale(1.1);
}

.el-table {
  font-size: 14px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
}
.el-table:hover {
  box-shadow: var(--shadow-hover);
}
.el-table th {
  background: var(--bg-primary) !important;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--primary-color);
}
.el-table td {
  border-bottom: 1px solid var(--border-light);
  transition: all var(--transition-fast);
}
.el-table tr:hover td {
  background: var(--bg-primary) !important;
}

.el-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: none;
  transition: all var(--transition-normal);
  overflow: hidden;
  position: relative;
}
.el-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}
.el-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.el-card:hover::before {
  opacity: 1;
}

.el-input__inner, .el-textarea__inner {
  border-radius: var(--radius-md);
  border: 2px solid var(--border-color);
  transition: all var(--transition-normal);
  font-size: 14px;
}
.el-input__inner:focus, .el-textarea__inner:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.1);
  transform: translateY(-1px);
}

.el-select .el-input__inner {
  border-radius: var(--radius-md);
}

.el-tag {
  border-radius: var(--radius-lg);
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  transition: all var(--transition-normal);
}
.el-tag:hover {
  transform: scale(1.05);
}

.el-dialog {
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.el-dialog__header {
  background: var(--primary-gradient);
  color: var(--text-primary);
  font-weight: 700;
  padding: 20px 24px;
}
.el-dialog__body {
  padding: 24px;
}

.el-message {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: none;
  font-weight: 600;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.el-message--success {
  background: linear-gradient(135deg, #06c05f 0%, #05a850 100%) !important;
  color: #ffffff !important;
}
.el-message--success .el-message__icon {
  color: #ffffff !important;
}
.el-message--warning {
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6b35 100%) !important;
  color: #ffffff !important;
}
.el-message--warning .el-message__icon {
  color: #ffffff !important;
}
.el-message--error {
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%) !important;
  color: #ffffff !important;
}
.el-message--error .el-message__icon {
  color: #ffffff !important;
}
.el-message--info {
  background: linear-gradient(135deg, #3d7eff 0%, #2c5ce6 100%) !important;
  color: #ffffff !important;
}
.el-message--info .el-message__icon {
  color: #ffffff !important;
}

/* 通用样式类 */
.page-container {
  padding: var(--space-lg);
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeInUp 0.6s ease-out;
}

.page-header {
  margin-bottom: var(--space-lg);
  position: relative;
}
.page-header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 4px;
  background: var(--primary-gradient);
  border-radius: 2px;
}
.page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px 0;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.page-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

.stat-card {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-light);
}
.stat-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px) scale(1.02);
  border-color: var(--primary-color);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transition: transform var(--transition-normal);
}
.stat-card:hover::before {
  transform: scaleX(1);
}
.stat-label {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.stat-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stat-trend {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.stat-trend.up { 
  color: var(--success-color);
  background: var(--success-light);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.stat-trend.down { 
  color: var(--error-color);
  background: #ffe6e6;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.card-section {
  background: white;
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-lg);
  transition: all var(--transition-normal);
  border: 1px solid var(--border-light);
  position: relative;
  overflow: hidden;
}
.card-section:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
  border-color: var(--primary-color);
}
.card-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity var(--transition-normal);
}
.card-section:hover::before {
  opacity: 1;
}
.card-section-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
}
.card-section-title i {
  color: var(--primary-color);
  font-size: 20px;
  padding: 8px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
}
.card-section:hover .card-section-title i {
  background: var(--primary-gradient);
  color: var(--text-primary);
  transform: scale(1.1);
}

.action-bar {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-primary);
}

.status-tag {
  display: inline-block;
  padding: 6px 16px;
  border-radius: var(--radius-lg);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--transition-normal);
  border: none;
}
.status-tag:hover {
  transform: scale(1.05);
}
.status-tag.success { 
  background: var(--success-gradient);
  color: var(--text-white);
  box-shadow: var(--success-shadow);
}
.status-tag.pending { 
  background: linear-gradient(135deg, #ff8f1f 0%, #ff6b35 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 143, 31, 0.3);
}
.status-tag.failed { 
  background: linear-gradient(135deg, #ff5757 0%, #ff4757 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(255, 87, 87, 0.3);
}
.status-tag.created { 
  background: linear-gradient(135deg, #3d7eff 0%, #3742fa 100%);
  color: var(--text-white);
  box-shadow: 0 4px 12px rgba(61, 126, 255, 0.3);
}

.empty-state {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
  color: var(--text-tertiary);
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-color);
  transition: all var(--transition-normal);
}
.empty-state:hover {
  border-color: var(--primary-color);
  background: white;
}
.empty-state i {
  font-size: 64px;
  margin-bottom: var(--space-md);
  color: var(--primary-color);
  transition: all var(--transition-normal);
}
.empty-state:hover i {
  transform: scale(1.1);
  color: var(--primary-dark);
}

/* 动画关键帧 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* 加载动画 */
.loading-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}
